<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>人员管理</title>
    <link rel="stylesheet" href="./css/iview.css">
    <script src="./js/vue.js"></script>
    <script src="./js/iview.js"></script>
    <style>
    html,
    body,
    .app {
        width: 100%;
        height: 100%;
    }
    
    .p-title {
        width: 100%;
        height: 60px;
        line-height: 60px;
        border-bottom: 1px solid #e2e2e2;
        padding-left: 16px;
    }
    
    .main-wrap {
        padding: 8px 32px;
    }
    
    .main-title {
        width: 100%;
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #e2e2e2;
    }
    
    .add-after-panle {
        padding: 8px 32px;
    }
    
    .add-row {
        width: 100%;
        height: 50px;
        line-height: 49px;
        margin: 8px 0;
    }
    </style>
</head>

<body>
    <div id="app" class="app">
        <Row class="p-title">
            <i-Col span="2" class="p-title-main"><span>公司员工</span></i-Col>
            <i-Col span="3">批量添加</i-Col>
            <i-Col span="3">
                <i-Button type="ghost">返回上级</i-Button>
            </i-Col>
        </Row>
        <div class="main-wrap">
            <Row class="main-title">
                <i-Col span="5">
                    当前下属员工<span>(251人)</span>
                </i-Col>
            </Row>
            <div class="add-after-panle">
                <Row class="add-row">
                    <i-Col span="5">
                        第一步：
                    </i-Col>
                </Row>
                <Row class="add-row">
                    <i-Col span="5">
                        下载员工通讯录模板，批量填写员工信息
                    </i-Col>
                    <i-Col span="5">
                        <i-Button type="primary">下载</i-Button>
                    </i-Col>
                </Row>
                <Row class="add-row">
                    <i-Col span="6">
                        部门选择：
                        <i-Input placeholder="请输入..." style="width: 200px"></i-Input>
                    </i-Col>
                    <i-Col span="6">
                        用户初始密码：
                        <i-Input placeholder="请输入..." style="width: 200px"></i-Input>
                    </i-Col>
                </Row>
                <Row class="add-row">
                    <i-Col span="5">
                        第三步：
                    </i-Col>
                </Row>
                <Row class="add-row" style="height: 60px">
                    <i-Col span="5">
                        下载员工通讯录模板，批量填写员工信息
                    </i-Col>
                    <i-Col span="5">
                        <Upload action="//jsonplaceholder.typicode.com/posts/">
                            <i-Button type="ghost" icon="ios-cloud-upload-outline">上传文件</i-Button>
                        </Upload>
                    </i-Col>
                </Row>
                <Row class="add-row">
                    <i-Col span="12">
                        <i-Progress :percent="100">
                            <Icon type="checkmark-circled"></Icon>
                            <span>成功</span>
                        </i-Progress>
                    </i-Col>
                </Row>
            </div>
        </div>
        <!-- end -->
        <div class="main-wrap">
            <Row class="main-title">
                <i-Col span="5">
                    当前下属员工<span>(251人)</span>
                </i-Col>
            </Row>
            <Row class="add-row">
                <i-Col span="16">
                    <Alert type="success">
                        <span>您一共上传（45）名员工</span>
                        <span style="color:#ff3300;margin-left: 8px;">有错误（12个）员工</span>
                        <span style="color:#ff9900 ;margin-left: 8px;">重复（45个）将不上传</span>
                    </Alert>
                </i-Col>
            </Row>
            <Tabs type="card">
                <Tab-pane label="全部上传">
                    <i-Table :columns="columns1" :data="data1"></i-Table>
                </Tab-pane>
                <Tab-pane label="错误">
                    <i-Table :columns="columns1" :data="data1"></i-Table>
                </Tab-pane>
                <Tab-pane label="重复上传">
                    <i-Table :columns="columns1" :data="data1"></i-Table>
                </Tab-pane>
            </Tabs>
        </div>
        <!-- end -->
    </div>
</body>
<script>
// vue 实例
var app = new Vue({
    el: '#app',
    data: {
        treeData: {},
        active: 1,
        addMember: false,
        addGroup: false,
        columns1: [{
            title: '姓名',
            key: 'name'
        }, {
            title: '年龄',
            key: 'age'
        }, {
            title: '地址',
            key: 'address'
        }],
        data1: [{
            name: '王小明',
            age: 18,
            address: '北京市朝阳区芍药居'
        }, {
            name: '张小刚',
            age: 25,
            address: '北京市海淀区西二旗'
        }, {
            name: '李小红',
            age: 30,
            address: '上海市浦东新区世纪大道'
        }, {
            name: '周小伟',
            age: 26,
            address: '深圳市南山区深南大道'
        }]

    },
    created: function() {
        //页面载入时，请求数据
        this.getData();

    },
    methods: {
        //获取数据
        getData: function() {
            // $.post('./getData',function(response){
            //      this.treeData=response.data;
            //  });
        }
    }
})
</script>

</html>
